const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

function resolve (dir) {
	return path.join(__dirname, dir);
}

// 判断启动时什么环境，自动配置相应代理
const VUE_APP_HOST = process.env.VUE_APP_HOST;
console.log(`启用什么环境的服务: ${VUE_APP_HOST}`);

module.exports = {
	outputDir: 'mobile',
	publicPath: './',
	assetsDir: 'static',
	productionSourceMap: VUE_APP_HOST !== 'prd',

	css: {
		extract: { ignoreOrder: true },
		loaderOptions: {
			less: {
				modifyVars: {
					'picker-confirm-action-color': '#ffb403'
				}
			},
			postcss: {
				plugins: [
					autoprefixer(),
					pxtorem({
						rootValue: 37.5,
						propList: ['*']
					})
				]
			}
		}
	},

	devServer: {
		port: 8080,
		https: false,
		hotOnly: true,
		proxy: {
			// 接口代理
			'/mobile/': {
				target: 'http://localhost:7026/',
				secure: false,
				changeOrigin: true,
				pathRewrite: {

				}
			},
		}
	},

	configureWebpack: config => {
		if (VUE_APP_HOST === 'prd') {
			// 配置webpack 压缩
			config.plugins.push(
				new CompressionWebpackPlugin({
					test: /\.js$|\.html$|\.css$/,
					// 超过4kb压缩
					threshold: 4096
				})
			);
		}
	},

	chainWebpack: config => {
		config.plugins.delete('prefetch');
		// 修改文件引入自定义路径
		config.resolve.alias
			.set('@', resolve('./src'))
			.set('@components', resolve('./src/components'))
			.set('@view', resolve('./src/view'));

		// 输出文件加hash
		config.output.filename('[name].[hash].js').end();
	},

	pluginOptions: {
		'style-resources-loader': {
			preProcessor: 'less',
			patterns: [path.resolve(__dirname, './src/common/var.less')]
		}
	}
};
